/**
 * Created by wangzilong on 2017/4/11.
 */
import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View,
    Image,
    ScrollView,
    TouchableOpacity,
    TextInput,
    ListView,
    Modal,
    Platform,
    InteractionManager,
    TouchableWithoutFeedback,
    Animated
} from 'react-native';
import ImageWrapper from '../components/ImageWrapper';
import NavigationBar from '../components/NavigationBar';
import StoreReview from './StoreReview';
import SettingPage from './SettingPage';
import LeftPage from './LeftPage';
import userService from '../lib/services/userService';
import StorageUser from '../lib/plugins/StorageUser';
var Dimensions = require('Dimensions');
const { width, height } = Dimensions.get('window');

export default class Mine extends Component{

    constructor(props) {
        super(props);
        $this = this;
        this.token = '';
        this.shopList = [];
        this.userId = '';
        this.state = {
            shopName:'',
            shopId:'',
            shopImage:'',
            userId:0,
            userName:'',
            userImg:'',
            phone:'',
            userData:{},
            modalVisible:false,
            textList:['在线','离开'],
            titleStaturs:'在线',
            left:new Animated.Value(-(7*width/10)),
            showModal:false,
            userMoney:'',
        };
        
    }

    componentDidMount() {
        var $this = this;
        StorageUser._getUser()
            .then(data=>{
                if(data.token){
                    $this.token = data.token;
                }
                if(data.userId){
                    $this.userId = data.userId;
                }
                if(data.shopName){
                    $this.setState({
                        shopName:data.shopName
                    })
                }
                if(data.shopList){
                    $this.shopList = data.shopList;
                }
                if(data.shopImage){
                    $this.setState({
                        shopImage:data.shopImage
                    })
                }
                InteractionManager.runAfterInteractions(() => {
                    $this.getUserDetails();
                });                
            }).catch(err=> {
                console.log(err)
            });
    }
    // 修改状态模态框
    renderStatursModal(){
        var list = this.state.textList;
        return(
            <Modal
                transparent={true}
                visible={this.state.modalVisible}
                onRequestClose={()=>this.requestClose()}>
                <TouchableWithoutFeedback onPress={()=>this.setState({modalVisible:false})}>
                    <View style={styles.modalBox}>
                        <View style={styles.triangle}></View>
                        <View style={styles.listBorder}>
                            
                            {this.renderModalList(list)}
                        </View>
                    </View>
                </TouchableWithoutFeedback>
            </Modal>
        )
    }
    // 渲染模态框每一个选项
    renderModalList(list){
        return(
            list.map((item,i)=>{
                return(
                    <TouchableOpacity key={i} onPress={()=>this.changeName(item)}>
                        <View style={styles.listItem}>
                            <Text style={{color:'#fff'}}>{item}</Text>
                        </View>
                    </TouchableOpacity>
                )
            })
        )
    }

    render(){
        return (
            <View style={styles.container}>
                <NavigationBar 
                    titleText={'我的('+this.state.titleStaturs+')'} 
                    leftStyle={styles.leftStyle}
                    rightIcon={'point'}
                    rightStyle={{marginRight:10}}
                    rightPress={()=>{this.renderModal()}}/>
                <ScrollView>
                    {this.renderStatursModal()}
                    <View style={styles.infoBox}>
                        <TouchableOpacity onPress={()=>this.goSafeOfAccount()} style={{flexDirection:'row',alignItems:'center',height:80}}>
                            <View>
                                <ImageWrapper width={60} height={60} icon={this.state.userImg?{uri:'http://test.520m.com.cn/upload/common/'+this.state.userImg}:'touxiang'} style={{borderRadius:10}}/>
                            </View>
                            <View style={styles.middleInfo}>
                                <View>
                                    <Text style={{color:'#151515',fontSize:16}}>{this.state.userName||'未填写'}</Text>
                                </View>
                                <View>
                                    <Text style={{color:'#979797'}}>账号:{this.state.phone}</Text>
                                </View>
                            </View>
                            <View>
                                <ImageWrapper style={{marginRight:10}} icon={'right'}/>
                            </View>
                        </TouchableOpacity>
                    </View>
                    <View style={styles.itemMargin}>
                        <LineItem text={'店铺审核'} icon={'review'} width={24} height={24} onPress={()=>this.goNextPage('StoreReview')}/>
                        <LineItem onPress={()=>this.goNextPage('CardList')} text={'绑定银行卡'} icon={'bankCard'} width={24} height={24}/>
                        <LineItem onPress={()=>this.goDrawCash()} text={'提现'} icon={'cash'} width={24} height={24}/>
                    </View>
                    <View style={styles.itemMargin}>
                        <LineItem style={{tintColor:'#0894ED'}} text={'设置'} icon={'setting'} width={24} height={24} onPress={()=>this.goNextPage('SettingPage')}/>
                    </View>
                </ScrollView>
            </View>
        )

    }
    showAnimate(){
        const {navigate } = this.props.navigation;
        navigate('LeftPage',{upData:(obj)=>{
            this.setState({
                shopName:obj.shopName,
                shopImage:obj.shopImage
            })
        }})
    }
    requestClose(){
        this.setState({
            showModal:false
        })
    }
    // 渲染模态框
    renderModal(){
        this.setState({
            modalVisible:true
        })
    }
    // 改变状态
    changeName(item){
        this.setState({
            titleStaturs:item,
            modalVisible:false,
        })
    }

    goNextPage(page){
        const {navigate } = this.props.navigation;
        navigate(page)
    }
    goDrawCash(){
        var $this = this;
        const {navigate } = this.props.navigation;
        navigate('DrawCash',{userMoney:$this.state.userMoney,upData:(money)=>{
            $this.setState({
                userMoney:money
            })
        }})
    }
    goSafeOfAccount(){
        var $this = this;
        const {navigate } = this.props.navigation;
        navigate('SafeOfAccount',{userData:$this.state.userData,token:$this.token,upData:(data)=>{
            var obj = $this.state.userData;
            obj.username = data.userName;
            if(data.userImg){
                obj.user_head_img = data.userImg;
                $this.setState({
                    userImg:data.userImg,
                    userName:data.userName,
                    userData:obj,
                })
            }else{
                $this.setState({
                    userName:data.userName,
                    userData:obj,
                })
            }
            
        }});
    }
    getUserDetails(){
        var $this = this;
        userService.userDetail(async function(data){
            alert(JSON.stringify(data));
            console.log(data)
            if(data.code==10000){
                $this.setState({
                    userId:data.data.id,
                    userName:data.data.username,
                    userImg:data.data.user_head_img,
                    phone:data.data.phone,
                    userData:data.data,
                    userMoney:data.data.user_money,
                })
            }
        },$this.token);
    }
}
class LineItem extends Component{
    render(){
        return(
            <View style={{borderBottomWidth:1,borderBottomColor:'#E2E2E5',backgroundColor:'#fff'}}>
                <TouchableOpacity style={styles.lineBox} onPress={this.props.onPress}>
                    <View>
                        <ImageWrapper style={this.props.style} icon={this.props.icon} width={this.props.width} height={this.props.height}/>
                    </View>
                    <View style={styles.lineText}>
                        <Text style={{fontSize:16,color:'#1A1A1A'}}>{this.props.text}</Text>
                    </View>
                </TouchableOpacity>
            </View>
        )
    }
}
const styles = StyleSheet.create({
    container:{
        flex:1,
        backgroundColor:'#EFEFF4',
        ...Platform.select({
            ios: {
                marginTop: 20
            },
            android: {
                marginTop:0
            },

        }),
    }, 
    leftStyle:{
        width:30,
        height:30,
        marginLeft:10,
        ...Platform.select({
            ios: {
                borderRadius:15,
            },
            android: {
                borderRadius:30,
            },

        }),
    },
    lineBox:{
        flexDirection:'row',
        height:50,
        alignItems:'center',
        paddingLeft:10
    },
    lineText:{
        flex:1,
        marginLeft:20
    },
    itemMargin:{
        marginBottom:20,
        borderTopWidth:1,
        borderTopColor:'#E2E2E5'
    },
    icon: {
        width: 26,
        height: 26,
    },
    infoBox:{
        backgroundColor:'#fff',
        paddingLeft:10,
        borderTopWidth:1,
        borderTopColor:'#E4E4E6',
    },
    middleInfo:{
        marginLeft:10,
        flex:1
    },
    listBorder:{
        position:'absolute',
        ...Platform.select({
            ios: {
                top:82,
            },
            android: {
                top:62,
            },

        }),
        right:5,
        width:60,
        backgroundColor:'rgb(79,145,237)',
        borderRadius:5,
        justifyContent:'center',
        alignItems:'center'
    },
    modalBox:{
        flex:1,
        backgroundColor:'rgba(3,3,3,0)',
        justifyContent:'center',
        alignItems:'center',
    },
    triangle:{
        borderBottomColor:'rgb(79,145,237)',
        borderBottomWidth:12,
        borderTopWidth:10,
        borderTopColor:'transparent',
        borderLeftWidth:10,
        borderLeftColor:'transparent',
        borderRightWidth:10,
        borderRightColor:'transparent',
        width:0,
        height:0,
        position:'absolute',
        ...Platform.select({
            ios: {
                top:60,
            },
            android: {
                top:40,
            },

        }),
        right:14


    },
    listItem:{
        height:30,
        justifyContent:'center'
    },
    animateStyle:{
        width:7*width/10,
        height:height,
        position:'absolute',
        top:0,
        zIndex:10000,
        paddingBottom:20
    },
    modalBorder:{
        flex:1,
        backgroundColor:'rgba(3,3,3,.7)',
        justifyContent:'center',
        alignItems:'center',
    },
    
});